<script setup>
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts'

const echartBar = ref();
let options = reactive([])
function chartInit() {
    //图表
    const myChart = echarts.init(echartBar.value, "light", {
        width: 900,
        height: 400
    });
    var option = {
        title:{
            text:'部分专业总分最高分最低分比较',
            textStyle:{
                color:'white'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['最高分', '最低分'], // 设置图例
            textStyle: {
                color: '#ffffff' // 设置图例文字为白色
            },
            top: '5%', // 将图例下移，避免与标题重叠
            itemGap: 20, // 设置图例项之间的间距
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                interval: 0, // 让所有的标签显示出来
                rotate: 30,  // 如果标签太多，可以稍微旋转，防止重叠
                color: '#ffffff' // 设置 x 轴标签文字颜色为白色
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#ffffff' // 设置 y 轴标签文字颜色为白色
            }
        },
        dataZoom: [
            {
                show: true,
                start: 94,
                end: 100
            },
            {
                type: 'inside',
                start: 94,
                end: 100
            }
        ],
        series: [
            {
                name: '最高分',
                type: 'bar',
                data: [],
                barWidth: '40%',
                color: '#92DDFF'
            },
            {
                name: '最低分',
                type: 'bar', // 设置图表类型为柱状图
                data: [], // 设置柱状图的数据
                barWidth: '40%', // 设置柱子的宽度
                color: '#B5FFC6', // 颜色设置
            },

        ],

    }
    const xdata = []
    const maxScore = []; // 最高分数据
    const minScore = []; // 最低分数据

    for (let index = 0; index < options.length; index++) {
        let obj = options[index];
        xdata.push(obj.professionalName)
        maxScore.push(obj.maxScore); // 使用 maxScore 作为最高分
        minScore.push(obj.minScore); // 使用 minScore 作为最低分  
    }
    // 配置 series 数据
    option.xAxis.data = xdata
    option.series[0].data = maxScore
    option.series[1].data = minScore
    //图表与数据项的绑定
    myChart.setOption(option);
}

function getData() {
    //获取服务器数据
    axios.get('/Pro-Postgraduate/queryAllMaxMinScores')
        .then((response) => {
            console.log("********")
            //if (response.data.code == 200) {
                console.log(response.data)
                options = response.data;
                chartInit();
            //}
        })
}
onMounted(() => {
    getData();
})
</script>

<template>
    <div>
        <div ref="echartBar" style="margin-top: -30px;margin-left: 7%;"></div>
    </div>
</template>

<style lang="css" scoped></style>